<template>
  <div class="lb-card-setting">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="setForm"
        :rules="setFormRules"
        ref="setForm"
        label-width="140px"
        class="card-form"
      >
        <el-form-item :label="tips[1]" prop="staff_dynamic">
          <el-radio-group v-model="setForm.staff_dynamic">
            <el-radio :label="1">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="0">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[2] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="分享页面名片入口" prop="dynamic_look_card">
          <el-radio-group v-model="setForm.dynamic_look_card">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
          <el-button
            @click="showDialog = true"
            type="small"
            class="show-btn"
            style="margin-left: 20px"
            >查看示例</el-button
          >
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="staffDynamic(2)">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>

      <el-dialog
        title="查看示例"
        :visible.sync="showDialog"
        width="400px"
        center
      >
        <div class="flex-center">
          <img
            class="look-image"
            src="https://lbqny.migugu.com/admin/dynamic/look.png"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">知道了</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showDialog: false,
      image: '',
      tips: {
        1: `员工发布${this.$t('menu.Dynamic')}`,
        2: `关闭后，小程序员工端将不能发布${this.$t('menu.Dynamic')}`
      },
      setForm: {
        staff_dynamic: 0,
        dynamic_look_card: 0
      },
      setFormRules: {
        staff_dynamic: { required: true, message: '请选择', trigger: 'change' },
        dynamic_look_card: { required: true, message: '请选择', trigger: 'change' }
      }
    }
  },
  created () {
    this.staffDynamic(1)
  },
  methods: {
    /**
     * @method 处理表单回显和提交
     */
    async staffDynamic (type) {
      let formInfo = type === 1 ? '' : this.setForm
      let { code, data } = await this.$api.staffDynamic(formInfo)
      if (code !== 200) return
      if (type === 1) {
        for (let key in this.setForm) {
          this.setForm[key] = data[key]
        }
      } else {
        this.$message.success(this.$t('tips.successSub'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-card-setting {
  width: 100%;
  .page-main {
    .card-form {
      .el-input {
        width: 300px;
      }
    }
    .look-image {
      width: 297px;
      height: 532px;
      border-radius: 10px;
      border: 1px solid #eee;
    }
  }
}
</style>
